import React, { createElement } from "react";
import { Comment, List, Tooltip } from "antd";
import API from "@common/api.js";
//import * as API from "@common/api";
import { LikeOutlined, LikeFilled } from '@ant-design/icons';

class TopicComment extends React.Component {
  constructor(props) {
    super(props);
    console.log("------------", props);
    this.state = {
      /*            author: "",
                  avatar: "",
                  content: "",
                  datetime: "",*/
      likes: props.data.thumb_sum,
      action: "",
    }
    this.like = this.like.bind(this);
  }
  like() {
    if (this.state.action === "liked") {
      API.dislike("comment", this.props.data.id);
      this.setState({
        action: "",
        likes: this.state.likes - 1
      });
      return;
    }

    console.log("::::::::::::::" + this.props);
    console.log("::::::::::::::" + this.props.data);
    console.log("::::::::::::::" + this.props.data.id);
    API.like("comment", this.props.data.id);
    this.setState({
      likes: this.state.likes + 1,
      action: "liked",
    })
  };


  // componentDidMount() {
  // let tempData = API.getCommentInfo({
  //   commentID: this.props.commentID,
  // })
  // this.setState({
  //   likes: tempData.likes,
  //   /* author: tempData.author,
  //      avatar: tempData.avatar,
  //      content: tempData.content,
  //      datetime: tempData.datetime,*/
  // })
  // }

  render() {
    const actions = [
      <Tooltip key="comment-basic-like" title="Like">
        <span onClick={this.like}>
          {createElement(this.state.action === 'liked' ? LikeFilled : LikeOutlined)}
          <span className="comment-action">{this.state.likes}</span>
        </span>
      </Tooltip>,
    ];
    console.log("+++++++++++", this.props.data);
    console.log("+++++++++++", this.props.data.username);
    return (
      <Comment
        actions={actions}
        id={this.props.data.id}
        author={this.props.data.username}
        avatar={this.props.data.avatar}
        content={this.props.data.content}
        datetime={this.props.data.createDatetime}
      />
    )
  }
}

export default TopicComment;